<template>
	<view class="water-fall">
		<image :src="shop.pic" />
		<view class="body">
			<view class="title">{{shop.title}}</view>
			<view class="tip-label">{{shop.tipLabel}}</view>
			<view class="price">
				<view class="current">
					<span>￥</span>{{shop.price}}
				</view>
				<view class="old">
					￥{{shop.oldPrice}}
				</view>
			</view>
			<view class="verify">
				<view class="text">{{shop.verifyText}}</view>
				<view class="other-desc">{{shop.otherDesc}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shop: {
				pic: '/static/logo.png',
				title: '这是商品这是商品这是商品这是商品',
				tipLabel: '大家都在关注',
				price: '329',
				oldPrice: '500',
				verify: true,
				verifyText: '平台保证',
				otherDesc: '100+评论',
			}
		},
		name:"waterFallPanel",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.water-fall{
		break-inside: avoid;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		width: 100%;
		background: white;
		box-shadow: 0 0 0 12rpx #F1F1F1;
		overflow: hidden;
		>image{
			width: 100%;
		}
		>.body{
			padding: 14rpx;
			>.title{
				font-size: 26rpx;
				line-height: 36rpx;
				overflow: hidden;
			  text-overflow: ellipsis;
			  display: -webkit-box;
			  display: box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2;
			}
			>.tip-label{
				padding: 8rpx 10rpx;
				display: inline-block;
				margin: 10rpx 0;
				font-size: 20rpx;
				border-radius: 5rpx;
				background-color: rgba(253, 120, 93, 0.3);
				color: rgb(253, 120, 93);
			}
			>.price{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				>.current{
					font-size: 28rpx;
					font-weight: 550;
					color: #f53b02;
					>span{
						font-size: 22rpx;
					}
				}
				>.old{
					font-size: 24rpx;
					margin-left: 10rpx;
					color: #ababab;
					text-decoration: line-through;
				}
			}
			>.verify{
				margin-top: 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.text{
					font-size: 22rpx;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
					background: linear-gradient(to left, rgba(252, 92, 125,0.5), rgba(106, 130, 251,0.5));
					color: white;
				}
				>.other-desc{
					color: gray;
					opacity: 0.8;
					margin-left: 5rpx;
					font-size: 23rpx;
				}
			}
		}
	}
</style>
